<template>
  <div class="setting-panel-gui">
    {{#each configs as | item |}}
    {{#if item.children}}
    <g-field-collapse
      {{#if item.config.toggleCol}}
      v-model="config.{{item.path}}.{{item.config.toggleCol}}"
      :toggle="true"
      {{^}}
      :toggle="false"
      {{/if}}
      {{#if item.config.tip}}
      label="{{item.config.alias}}"
      tooltip="{{{item.config.tip}}}"
      {{^}}
      label="{{item.config.alias}}"
      {{/if}}
    >
      {{#each item.children as | subitem |}}
      {{#if (neq subitem.key item.config.toggleCol)}}
      <g-field
        {{#if subitem.config.tip}}
        label="{{subitem.config.alias}}"
        tooltip="{{{subitem.config.tip}}}"
        {{^}}
        label="{{subitem.config.alias}}"
        {{/if}}
        :level="2"
      >
        {{> prop-component-tpl componentTypes=../../componentTypes}}
      </g-field>
      {{/if}}
      {{/each}}
    </g-field-collapse>
    {{else}}
    <g-field
      {{#if item.config.tip}}
      label="{{item.config.alias}}"
      tooltip="{{{item.config.tip}}}"
      {{^}}
      label="{{item.config.alias}}"
      {{/if}}
    >
      {{> prop-component-tpl componentTypes=../componentTypes}}
    </g-field>
    {{/if}}
    {{/each}}
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, toRef } from 'vue'
import {
  fontFamilys,
  fontWeights,
  fontStyles,
  hAligns,
  vAligns,
  writingModes,
  justifyContents,
  aligns,
  angles,
  locations,
  lineStyles,
  fillTypes,
} from '@/data/select-options'
import { boxImgs, decorateImgs } from '@/data/images'
import { {{comName}} } from './{{fileName}}'

export default defineComponent({
  name: 'V{{comName}}Prop',
  props: {
    com: {
      type: Object as PropType<{{comName}}>,
      required: true,
    },
  },
  setup(props) {
    const config = toRef(props.com, 'config')

    return {
      config,

      fontFamilys,
      fontWeights,
      fontStyles,
      hAligns,
      vAligns,
      writingModes,
      justifyContents,
      aligns,
      angles,
      locations,
      lineStyles,
      fillTypes,
      boxImgs,
      decorateImgs,
    }
  },
})
</script>

<style lang="scss" scoped>
@import '~@/styles/themes/var';
</style>
